<template>
  <view>
    <view class="statistic">
      <view class="statistic-box" :class="tabIndex == index ? 'active-bg':''" v-for="(item, index) in tabArr" :key="index" @tap="tabClick(index)">
        <view class="statistic-box-title">{{item.label}}</view>
        <view class="statistic-box-amount">{{ item.amount }}</view>
      </view>
    </view>
    <view class="user" v-if="tabIndex==0 || tabIndex==1">
      <view class="user-title">
        <view class="user-title-txt">手机号</view>
        <view class="user-title-txt">推荐人</view>
      </view>
      <view  v-for="(item, index) in userList" :key="index">
        <view class="user-item">
          <view class="user-item-txt" style="text-align: left;">{{item.mobile || item.nickname}}</view>
          <view class="user-item-txt" style="text-align: left;">{{item.pname || '-'}}</view>
        </view>
        <view class="user-item">
          <view class="user-item-txt" style="text-align: left;">积分：{{item.water_amount || 0}},{{item.water_amount_back || 0}},{{item.balance || 0}}</view>
          <view class="user-item-txt" style="text-align: left;">加油：{{item.gas_amount_back || 0}},{{item.gas_amount_remind || 0}},{{item.gas_amount || 0}}</view>
        </view>
        <view style="width: 100%;height: 1px;background:#ccc"></view>
      </view>
    </view>
    <view class="user" v-if="tabIndex==2 || tabIndex==3">
      <view class="user-title">
        <view class="user-title-txt">签约人</view>
        <view class="user-title-txt">名称</view>
        <view class="user-title-txt">价格</view>
        <view class="user-title-txt">推荐人</view>
      </view>
      <view  v-for="(item, index) in orderList" :key="index">
        <view class="user-item">
          <view class="user-item-txt" style="text-align: left;">{{item.sign_name}}{{item.sign_mobile}}</view>
          <view class="user-item-txt" style="text-align: left;">{{item.coupon_name || '-'}}</view>
        </view>
        <view class="user-item">
          <view class="user-item-txt" style="text-align: left;flex:1">{{item.price || 0}}</view>
          <view class="user-item-txt" style="text-align: left;flex:1">{{item.pname}}</view>
          <view class="user-item-txt" style="text-align: left;flex:1">{{item._add_time_str.substr(0, 10)}}</view>
        </view>
        <view style="width: 100%;height: 1px;background:#ccc"></view>
      </view>
    </view>
    <view class="user" v-if="tabIndex==4 ">
      <view class="user-title">
        <view class="user-title-txt" style="flex:2">签约人</view>
        <view class="user-title-txt">剩余</view>
        <view class="user-title-txt">待释放</view>
        <view class="user-title-txt" >操作</view>
      </view>
      <view class="user-item" v-for="(item, index) in orderList" :key="index">
        <view class="user-item-txt" style="flex:2">{{item.username || item.nickname}}</view>
        <view class="user-item-txt">{{item.gas_amount_back}}</view>
        <view class="user-item-txt">{{item.gas_amount_remind}}</view>
        
        <view v-if="item.gas_amount_remind > 0" class="user-item-txt"  style="background-color: #EC3B26;border-radius: 10rpx;color:#fff" @tap="itemClick(item)">出账</view>
        <view v-else class="user-item-txt"  style="background-color: #005ECD;border-radius: 10rpx;color:#fff" >出账</view>
      </view>
    </view>
    <view class="user" v-if="tabIndex==5">
      <view class="user-title">
        <view class="user-title-txt" style="flex:2">签约人</view>
        <view class="user-title-txt">价格</view>
        <view class="user-title-txt">支付方式</view>
      </view>
      <view class="user-item" v-for="(item, index) in orderList" :key="index">
        <view class="user-item-txt" style="flex:2">{{item.sign_name}}{{item.sign_mobile}}</view>
        <view class="user-item-txt">{{item.price}}</view>
        <view class="user-item-txt">{{item.pay_type}}</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabIndex: 0,
        tabArr: [
          {
            label: '今日注册',
            amount: 0
          },
          {
            label: '所有注册',
            amount: 0
          },
          {
            label: '所有流水',
            amount: 0
          },
          {
            label: '今日流水',
            amount: 0
          },
          {
            label: '加油流水',
            amount: 0
          },
          {
            label: '停车流水',
            amount: 0
          },
        ],
        userList: [],
        orderList: [],
      }
    },
    onPullDownRefresh() {
      this.init()
      this.tabClick(0)
      setTimeout(function() {
        uni.stopPullDownRefresh();
      }, 1000);
    },
    onShow() {
      this.init()
      this.tabClick(0)
    },
    methods: {
      itemClick(item) {
        let that = this
        // 加油
        uni.showModal({
          title: '提示',
          content: '确定要对用户(' + item.mobile + ')的加油分进行释放操作吗',
          success: res => {
            if (res.confirm) {
              that.changeGas(item)
            } 
          }
        })
      },
      changeGas(item) {
        // 改变个人信息   增加一条记录
        if (item.gas_amount_remind > 0){
          vk.callFunction({
                url: 'user/kh/updateUserGas',
                title: '加载中...',
                data: {
                  gas_amount_remind: 0,
                  amount: item.gas_amount_remind,
                  nickname: item.nickname,
                  user_id: item._id
                },
                success: (info) => {
                  vk.toast('更新成功', 'none')
                  this.tabClick(4)
                }
              })
        } else {
              uni.showToast({
                title: '余额不足，请检查账户信息',
                icon: 'none'
              })
            }
      },
      init() {
        // 今日注册
        // 今日流水
        const { todayStart, todayEnd } = vk.pubfn.getCommonTime(new Date())
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/userList',
            data: {
              todayStart,
              todayEnd
            },
            success: (res) => {
              this.tabArr[0].amount = res.total
            }
          })
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/userAllget',
            success: (res) => {
              this.tabArr[1].amount = res.total
            }
          })
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/orderAllget',
            success: (res) => {
              let amount = 0
              let amount_gas = 0
              let amount_car = 0
              if ( res.rows.length> 0) {
                res.rows.map(item => {
                  amount +=  parseInt(item.price)
                })
                this.tabArr[2].amount = amount
                for (let i = 0; i < res.rows.length;i++) {
                  let item = res.rows[i]
                  if (item.coupon_name.indexOf('停车') > -1) {
                    amount_car +=  parseInt(item.price)
                  }
                  if (item.coupon_name.indexOf('加油') > -1) {
                    amount_gas+=  parseInt(item.price)
                  }
                }
                this.tabArr[4].amount = amount_gas
                this.tabArr[5].amount = amount_car
              }
            }
          })
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/orderList',
            data: {
              todayStart,
              todayEnd
            },
            success: (res) => {
              let amount = 0
              if (res.rows.length > 0) {
                res.rows.map(item => {
                  amount +=  parseInt(item.price)
                })
                this.tabArr[3].amount = amount
              }
            }
          })
      },
      getData(index) {
        // 今日注册
        // 今日流水
        const { todayStart, todayEnd } = vk.pubfn.getCommonTime(new Date())
        if (index ==0) {
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/userList',
            data: {
              todayStart,
              todayEnd
            },
            success: (res) => {
              this.tabArr[index].amount = res.total
              this.userList = res.rows
            }
          })
        }
        if (index ==1) {
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/userAllget',
            success: (res) => {
              this.tabArr[index].amount = res.total
              this.userList = res.rows
            }
          })
        }
        if (index ==2) {
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/orderAllget',
            success: (res) => {
              this.orderList = res.rows
              let amount = 0
              if (res.rows.length > 0) {
                res.rows.map(item => {
                  amount +=  parseInt(item.price)
                })
                this.tabArr[index].amount = amount
              }
            }
          })
        }
        if (index ==3) {
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/orderList',
            data: {
              todayStart,
              todayEnd
            },
            success: (res) => {
              this.orderList = res.rows
              let amount = 0
              if (res.rows.length > 0) {
                res.rows.map(item => {
                  amount +=  parseInt(item.price)
                })
                this.tabArr[index].amount = amount
              }
            }
          })
        }
        if (index ==4) {
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/userAllget',
            success: (res) => {
              let arr = []
              if (res.rows.length > 0) {
                for (let i = 0; i < res.rows.length;i++) {
                  let item = res.rows[i]
                  if (item.gas_name && item.gas_name.indexOf('VIP') > -1) {
                    arr.push(item)
                  }
                }
                this.orderList = arr
              }
            }
          })
        }
        if (index ==5) {
          vk.callFunction({
            title: '加载中...',
            url: 'user/kh/orderAllget',
            success: (res) => {
              let arr = []
              let amount = 0
              if (res.rows.length > 0) {
                for (let i = 0; i < res.rows.length;i++) {
                  let item = res.rows[i]
                  if (item.coupon_name.indexOf('停车') > -1) {
                    amount+=  parseInt(item.price)
                    arr.push(item)
                  }
                }
                this.tabArr[index].amount = amount
                this.orderList = arr
              }
            }
          })
        }
        
      },
      tabClick(index) {
        console.log(index, 'index----')
        this.tabIndex = index
        this.getData(index)
      },
    }
  }
</script>

<style lang="scss">
.tab {
  display: flex;
  height: 88rpx;
  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.condition {
  display: flex;
  height: 66rpx;
  &-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.active-color {
  color: #005ECD
}
.active-bg {
  background-color: #005ECD;
  color:#fff!important
}
.user {
  position: relative;
  padding: 24rpx;
  &-title {
    position: sticky;
    left: 0;
    top: 0;
    background: #005ECD;
    color: #fff;
    height: 66rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    &-txt {
      font-weight: 500;
      flex: 1;
      text-align: center;
    }
  }
  &-item {
    font-size: 26rpx;
    display: flex;
    margin: 10rpx 0;
    &-txt {
      flex: 1;
      text-align: center;
      font-weight: 500;
      height: 66rpx;
      line-height: 66rpx;
    }
  }
}
.statistic {
  padding: 24rpx;
  display: flex;
  flex-wrap: wrap;
  &-box {
    width: 22%;
    margin: 0 1%;
    height: 100rpx;
    border-radius: 8rpx;
    border: 1px solid #d0d0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 10rpx;
    &-title {
      font-size: 24rpx;
    }
    &-amount {
      font-size: 30rpx;
      font-weight: 500;
    }
  }
}
</style>
